<template>
    <div>
        <!--      读取vuex中的数据：$store.state.counter-->
        <h1>当前求和为：{{$store.state.counter}}</h1>
        <h2>当前求差为：{{num}}</h2>
        <h2>名字：{{name}} {{age}}</h2>
        <h2>学校：{{school}}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="reduce(n)">-</button>
        <button @click="incrementAddn">+n</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>
<script>
    // 导入
    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
    export default {
        name:'Vuex',
        data() {
            return {
                n:1,

            }
        },
        computed: {
            num() {
                return this.$store.getters.doubleCounter
            },
    //借助mapState生成计算属性：sum、school
    // （对象写法）
    ...mapState({name:'name',school:'school'}),
            // （数组写法）
    ...mapState(['name','school']),

    //借助mapGetters生成计算属性：age
    // （对象写法）
    ...mapGetters({age:'age'}),
            // （数组写法）
    ...mapGetters(['age'])

    },
    methods: {
        //靠mapActions生成：incrementAddn、incrementWait（对象形式）
    ...mapActions({incrementAddn:'addN',incrementWait:'addWait',reduce:'jianN'}),

        //靠mapActions生成：incrementAddn、incrementWait,reduce（数组形式）
        // ...mapActions(['addN','add','jianN']),

        // 这里如果要传入参数，无需额外处理，调用的时候直接传参数就行，他会自动映射,这里的mapActions会自动把reduce(1) 映射成this.$store.dispatch('jianN', 1)
    ...mapActions({
            reduce: 'jianN'
        }),
        // 写法1：
        // methods: {
        //   reduce (param) {
        //     this.$store.dispatch('jianN', param)
        //   }
        // }

        // 写法2：
        // methods: mapActions({
        //   reduce: 'jianN'
        // })

        // 写法3：
        // methods: {
        //     ...mapActions({
        //         reduce: 'jianN'
        //     })
        // }
        //靠mapActions生成：increment、reduce（对象形式）
    ...mapMutations({increment:'add'}),

        //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['add']),

        // 备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则传的参数是事件对象(event)。
    },
    }
</script>
